body {
    margin: 0;
    padding: 0;
    color: #676767;
    background: #f6f6f6;
    font: 14px/1.5 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", tahoma, "times new roman", helvetica, arial;
    overflow-X: hidden
}

* {
    outline: none;
    margin: 0;
    padding: 0
}

a {
    text-decoration: none;
    color: #676767
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

header.index-header {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    position: relative;
    height: 100vh
}

.header-top {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 30px;
    box-sizing: border-box;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    align-items: center;
}

.header-tel {
    color: #fff
}

.header-tel b {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 24px;
}

a.logo {
    font-size: 0
}

.superiority-panel {
    width: calc(100% - 100px);
    height: 80vh;
    position: relative;
    font-size: 0;
    overflow: hidden;
    margin: 50px 50px 0
}

.superiority-panel video {
    object-fit: fill;
    width: 100%;
    position: absolute;
}

.superiority-box {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    padding: 0 calc(50% - 600px);
    height: 100%;
    z-index: 999;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    /* background: #000 */
}

.superiority-panel::before {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: rgba(30, 95, 116, .6);
    z-index: 1
}

.superiority-box .item {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: calc(100% / 3);
    box-sizing: border-box;
    border-right: 1px solid rgba(255, 255, 255, .2);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    justify-content: center;
    padding: 50px 0;
}

.superiority-box .item:nth-child(3),
.superiority-box .item:nth-child(6) {
    border-right: none
}

.superiority-box .item:nth-child(4),
.superiority-box .item:nth-child(5),
.superiority-box .item:nth-child(6) {
    border-bottom: none
}

.superiority-box .item * {
    color: #fff
}

.superiority-box .item b {
    font-size: 60px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: normal;
}

.superiority-box .item b::after {
    content: '＋'
}

.superiority-box .item span {
    font-size: 20px;
    font-weight: bold;
}

.superiority-box .item:nth-child(6) b::after {
    content: "％";
    font-size: 40px;
}

.about-panel {
    position: relative;
    width: 100%;
    margin-top: 50px;
    background: url(../images/about-bg.jpg) no-repeat center;
    background-size: cover;
    height: 600px;
}

.about-panel .text {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    background: rgba(47, 47, 47, 0.5);
    box-sizing: border-box;
    min-height: 50%;
    padding: 40px;
    display: flex;
    flex-flow: column nowrap;
}

.about-panel .text h3 {
    color: #fff;
    font-size: 30px;
    margin: 0
}

.about-panel .text span {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #fff;
}

.about-panel .text span::after {
    width: 60px;
    height: 2px;
    display: block;
    content: '';
    background: #fff;
    margin: 20px 0
}

.about-panel .text p {
    color: #d5d5d5;
    padding-bottom: 30px;
}


.about-panel .text a {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-top: 1px solid #595959;
    padding: 30px 0;
    color: #fff
}

.about-panel .text a.more::after {
    background-image: url(../images/wechat-more.png);
    display: block;
    content: '';
    width: 26px;
    height: 26px;
}

.about-panel .text img {
    position: absolute;
    top: 50px;
    right: 50px;
    width: 70px;
    height: 70px
}

.index-banner {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;
    position: relative;
}


.banner-main {
    height: calc(100vh - 240px);
    position: relative;
    width: 100%;
    z-index: 2
}

.boot-page {
    height: calc(100vh);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background-repeat: no-repeat bottom center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
}

.boot-page video{  width: 100%; height: 100%;
    object-fit: fill;
}
.mid-box {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.banner-main .item {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden
}

.banner-main .item img {
    max-width: 500px;
}

.banner-main .item::before {
    content: '';
    display: block;
    width: 5000px;
    height: 5000px;
    border-radius: 50%;
    position: absolute;
    bottom: -2500px;
    left: -2500px;
    /* opacity: 0.6; */
    transform: scale(0);
    transition: all 1s cubic-bezier(.77, 0, .175, 1) 0s;
}

/* .banner-main .item.active {
    
} */

.banner-main .item.active::before {
    transform: scale(1);
    /* animation: opacity 2s forwards; */
}

@keyframes opacity {
    50% {
        opacity: 1
    }

    100% {
        opacity: .6
    }
}

.banner-main .item .text,
.banner-main .item img {
    transition: all 1.5s;
    opacity: 0;
    z-index: 1
}

.banner-main .item.active .text,
.banner-main .item.active img {
    transition: all 1.5s 1s;
    opacity: 1;
}

.banner-main .item img {
    transform: translateX(50px)
}

.banner-main .item.active img {
    transform: translateX(0)
}

.banner-main .item .text * {
    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, .25);
    font-weight: bold;
    transition: all 1.5s 1s;
}

.banner-main .item .text h3 {
    font-size: 40px;
    transform: translateY(-50px)
}

.banner-main .item .text p {
    font-size: 20px;
    transform: translateY(50px)
}

.banner-main .item.active .text h3,
.banner-main .item.active .text p {
    transform: translateY(0)
}

.banner-list {
    height: 240px;
    display: flex;
    flex-flow: row nowrap;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.banner-list .item {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    flex: 1;
    justify-content: center;
    font-size: 0;
    cursor: pointer;
    transition: all 0.5s;
    box-sizing: border-box;
    /* border-top: 2px solid transparent */
    /* opacity: 1 */
}

.banner-list .item.active {
    box-shadow: 0 -10px 10px rgba(0, 0, 0, .2) inset;
    /* border-color: #fff */
}

.banner-list .item img {
    border-radius: 50%;
    transition: all 0.5s;
    width: 80px;
    height: 80px;
    border: 2px solid #fff;
    box-sizing: border-box;
    padding: 10px;
}

.banner-list .item.active img {
    transform: translateY(-10px);
    box-shadow: 0 0 5px rgba(0, 0, 0, .3)
}

.banner-list .item span {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin-top: 10px;
    text-shadow: 0 0 3px rgba(0, 0, 0, .2)
}

.banner-main .item:nth-child(1)::before {
    background: rgba(108,127,157,.8);
    left: calc(-2500px + 8.333333%)
}

.banner-main .item:nth-child(2)::before {
    background: rgba(141,215,190,.8);
    left: calc(-2500px + 25%)
}

.banner-main .item:nth-child(3)::before {
    background: rgba(157,198,220,.8);

    left: calc(-2500px + 41.666667%)
}

.banner-main .item:nth-child(4)::before {
    background: rgba(89,131,155,.8);
    left: calc(-2500px + 58.333333%)
}

.banner-main .item:nth-child(5)::before {
    background: rgba(250,211,196,.8);
    left: calc(-2500px + 75%)
}

.banner-main .item:nth-child(6)::before {
    background: rgba(250,226,181,.8);
    left: calc(-2500px + 91.666667%)
}

.banner-list .item:nth-child(1) {
    background: rgba(108,127,157,.8)
}

.banner-list .item:nth-child(2) {
    background: rgba(141,215,190,.8)
}

.banner-list .item:nth-child(3) {
    background: rgba(157,198,220,.8)

}

.banner-list .item:nth-child(4) {
    background: rgba(89,131,155,.8)
}

.banner-list .item:nth-child(5) {
    background: rgba(250,211,196,.8)
}

.banner-list .item:nth-child(6) {
    background: rgba(250,226,181,.8)
}

.case-panel {
    box-sizing: border-box;
    padding: 50px;
    margin-top: 50px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    background: url(../images/case-bg.jpg) no-repeat center fixed;
    background-size: cover;
}

.case-box {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: space-between;
    overflow: hidden;
    /* position: relative; */
}

.case-box a {
    display: flex;
    flex-flow: column nowrap;
    font-size: 0;
    width: calc((100% - 150px) / 4);
    position: relative;
    transition: all 0.5s;
}

.case-box a:hover h3 {
    text-indent: 2em;
}

.case-box a:hover img {
    transform: scale(1.1);
}

/* transform: scale(0.9);
background: rgba(52, 133, 189)
} */

.case-box a * {
    transition: all 0.5s
}

.case-box a .img {
    font-size: 0;
    overflow: hidden
}

.case-box a b {
    font-size: 12px;
    font-family: Constantia
}

.case-box a .text {
    display: flex;
    flex-flow: column nowrap;
    box-sizing: border-box;
    padding: 20px;
    /* background: #fff; */
}

.case-box a .tag {
    font-size: 12px;
}

.case-box a .tag span {
    color: #a7a7a7
}

.case-box a h3 {
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    margin: 10px 0
}

.case-box a img {
    align-items: center;
    width: 100%
}



.case-panel a.more {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin: 50px 0;
    padding: 10px;
    color: #fff;
    line-height: 3;
    background: rgba(255, 255, 255, .5)
}

.case-panel a.more::after {
    background: url(../images/wechat-more.png) no-repeat;
    display: block;
    content: '';
    height: 26px;
    width: 26px;
}

.case-panel a.more::before {
    background: url(../images/wehcat-more-bg.png);
    width: 69px;
    height: 19px;
    display: block;
    content: ''
}

.news-panel {
    background: #fff;
    box-sizing: border-box;
    margin: 50px;
    width: calc(100% - 100px);
    padding: 50px;
    overflow: hidden;
}

.news-title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 50px;
    border-bottom: 1px solid #f0f0f0
}

.news-title-text {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.news-title-text * {
    font-size: 30px;
    color: #000
}

.news-title-text span {
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.news-title-text span::after {
    width: 60px;
    height: 2px;
    background: #000;
    display: block;
    content: ''
}

.news-title-text b {
    font-weight: normal
}

.news-title-text b::before {
    content: '/';
    margin: 0 5px
}

.news-main {
    width: 100%;
    display: flex;
    flex-flow: row wrap
}

.news-main a {
    box-sizing: border-box;
    padding: 50px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0;
    width: 50%;
    transition: all 0.5s;
}

.news-main a:hover {
    background: #3485bd
}

.news-main a div * {
    transition: all 0.5s;
}

.news-main a:hover div * {
    color: #fff !important
}

.news-main a>div {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    box-sizing: border-box;
    padding-right: 50px;
    align-items: center;
}

.news-main a:nth-child(odd) {
    border-right: 1px solid #f0f0f0
}

.news-main a img {
    width: 200px;
    height: 200px;
    margin-right: 50px;
}

.news-main a div.text {
    display: flex;
    flex-flow: column nowrap;
    flex: 1;
    justify-content: space-between
}

.news-main a div.text h3 {
    color: #575957;
    font-size: 18px;
    width: 100%
}

.news-main a div.text p {
    font-size: 13px;
    color: #a6a6a6;
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    flex: 1;
    margin: 20px 0;
    padding-bottom: 20px
}

.news-main a div.text p::after {
    width: 60px;
    height: 3px;
    background: #4f4f4f;
    display: block;
    content: '';
    position: absolute;
    bottom: -2px
}

.news-main a div.text span {
    font-size: 12px;
    font-family: 'Courier New', Courier, monospace
}

.news-main a div.text b {
    font-size: 14px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

.news-main a div.text div {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.news-main a div.time {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 0 50px
}

.news-main a div.time b {
    font-size: 50px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: normal
}

.news-main a div.time span {
    font-size: 32px;
    font-family: Constantia;
    font-weight: bold;
}

.service-panel {
    width: 100%;
    box-sizing: border-box;
    padding: 0 50px;
    height: 80vh;
    background: url(../images/service-bg.jpg) no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-box {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 80%;
    display: flex;
    flex-flow: row wrap;
}

.service-box::before {
    background: rgba(255, 255, 255, .8);
    border-radius: 10px;
    display: block;
    content: '';
    width: 100%;
    height: 10px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}

.service-box .item {
    width: 15%;
    height: 50%;
    position: relative;
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
}

.service-box .item div {
    border-radius: 10px;
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    box-sizing: border-box;
    padding: 35px 10px 50px;
    background: rgba(208, 207, 206, .8);
    width: 100%;
    cursor: pointer;
    transition: all 0.5s
}

.service-box .item div img {
    transition: all 0.5s
}

.service-box .item:hover::before {
    border-color: #3485bd;
    background: #fff
}

.service-box .item div:hover {
    background: rgba(208, 207, 206, 1);
}

.service-box .item div:hover img {
    transform: rotate(380deg)
}

.service-box .item::before {
    display: block;
    width: 10px;
    height: 10px;
    content: '';
    background: #3c3c3c;
    border-radius: 100%;
    position: absolute;
    border: 5px solid rgba(208, 207, 206, .5);
    transition: all 0.5s
}

.service-box .item h3 {
    margin-bottom: 20px;
}

.service-box .item img {
    position: absolute;
    border: 5px solid rgba(208, 207, 206, .8);
    border-radius: 100%
}


.service-box .item:nth-child(-n+4) {
    margin-right: 10%;
    align-self: flex-start
}

.service-box .item:nth-child(-n+4) img {
    bottom: -31px;
}

.service-box .item:nth-child(n+5) {
    margin-left: 10%;
    align-self: flex-end
}

.service-box .item:nth-child(n+5) img {
    top: -31px;
}

.service-box .item:nth-child(n+5) div {
    bottom: 0
}

.service-box .item:nth-child(-n+4)::before {
    bottom: -10px
}

.service-box .item:nth-child(n+5)::before {
    top: -10px
}

footer.footer {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    /* margin-top: 50px; */
}

.footer-box {
    background: rgba(56, 54, 55, 1);
    box-sizing: border-box;
    padding: 50px 150px;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.footer-box>div {
    display: flex;
    flex-flow: column nowrap;
    width: calc((100% - 150px) / 4)
}

.fb-title {
    font-weight: bold;
    color: #fff;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(72, 70, 71, 1);
    margin-bottom: 20px;
}

.about p {
    color: rgba(153, 153, 153, 1);
    font-size: 14px;
    line-height: 2
}

.list-box,
.super-box {
    display: flex;
    flex-flow: row wrap;
}

.list-box a,
.super-box span {
    width: 50%;
    color: rgba(153, 153, 153, 1);
    display: block;
    line-height: 2
}

.case-box-f {
    display: flex;
    flex-flow: column nowrap;
}

.case-box-f a {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.case-box-f a:last-child {
    margin-bottom: 0
}

.case-box-f a img {
    width: 120px;
    height: auto;
    align-self: flex-start
}

.case-box-f a .text {
    flex: 1;
    margin-left: 10px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}

.case-box-f a .text * {
    color: rgba(153, 153, 153, 1);
}

.cus-box {
    background: rgba(34, 34, 34, 1);
    box-sizing: border-box;
    padding: 50px 150px;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.code {
    display: flex;
    flex-flow: row nowrap;
    font-size: 0;
    align-items: center;
}

.code-item {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-right: 20px
}

.code-item span {
    font-size: 14px;
    color: rgba(153, 153, 153, 1);
    font-size: 12px;
    margin-top: 10px;
}

.code img {
    width: 100px;
    height: auto;
}

.code .text {
    display: flex;
    flex-flow: column nowrap;
}

.code .text b {
    color: #fff;
    font-weight: bold;
    font-size: 14px
}

.code .text span {
    color: rgba(153, 153, 153, 1);
    font-size: 12px
}

.cus-main {
    display: flex;
    flex: 1;
    justify-content: space-around;
    flex-flow: row nowrap;
}

.cus-main .item {
    display: flex;
    flex-flow: column nowrap;
    box-sizing: border-box;
    padding-left: 50px;
    background-repeat: no-repeat
}

.cus-main .item h4 {
    color: #fff;
    line-height: 2;
    font-weight: bold;
}

.cus-main .item h4 img {
    margin-right: 10px;
}

.cus-main .item p {
    color: rgba(153, 153, 153, 1);
    line-height: 1.6
}

.copyright {
    background: rgba(56, 54, 55, 1);
    padding: 20px 150px;
    box-sizing: border-box;
    color: rgba(153, 153, 153, 1);
}



.list-header {
    display: flex;
    flex-flow: column nowrap;
}

.list-banner {
    width: 100%;
    position: relative;
    height: 600px;
    background-size: cover;
    background: no-repeat center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-banner::before {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(30, 95, 116, .7) 0%, rgba(23, 9, 49, .7) 100%);
    content: ''
}

.list-banner p {
    font-size: 40px;
    font: bold;
    color: #fff;
    position: relative;
    z-index: 2;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
    font-weight: bold;
}

nav.nav {
    display: flex;
    flex-flow: row nowrap;
}

nav.nav a {
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 10px
}

nav.nav a:last-child {
    border: none
}


nav.nav a div {
    position: relative;
    display: block;
    transform-style: preserve-3d;
    transition: all .4s cubic-bezier(0.445, 0.145, 0.355, 1);
    color: #fff;
    padding: 0 50px;
}

nav.nav a div * {
    display: block;
    text-align: center;
    height: 50px;
    line-height: 50px;
    transition: all .4s cubic-bezier(0.445, 0.145, 0.355, 1);
}

nav.nav a div b {
    font-size: 16px;
    transform: translateZ(20px);
}

nav.nav a div span {
    display: flex;
    flex-flow: row nowrap;
    font-weight: bold;
    font-size: 14px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    opacity: 0;
    left: 80%;
    top: 0;
    width: 100%;
    justify-content: center;
    position: absolute;
    transform: rotateY(90deg) translateZ(-20px);
}

nav.nav a div span::before {
    content: '——　'
}

nav.nav a:hover div,
nav.nav a.active div {
    transform: rotateY(-90deg);

}

nav.nav a:hover div b,
nav.nav a.active div b {
    opacity: 0
}

nav.nav a:hover div span,
nav.nav a.active div span {
    opacity: 1;
    color: #fff;
    background: rgba(0, 0, 0, .2)
}

.list-main {
    width: 100%;
    box-sizing: border-box;
    padding: 0 100px 50px;
    display: flex;
    flex-flow: column nowrap;
    /* background-size: #fff; */
}



.classify-list {
    display: flex;
    flex-flow: row nowrap;
    margin: 50px 0;
    border-bottom: 1px solid #c1c1c1;
    align-items: center;
}

.classify-list a {
    padding: 0 10px;
    color: #000;
    font-size: 15px;
    position: relative;
    padding-bottom: 10px;
    transition: all 0.5s
}

.classify-list a * {
    transition: all 0.5s
}

.classify-list a.active {
    font-weight: bold;
}

.classify-list a.active,
.classify-list a:hover {
    color: royalblue;
    padding: 0 30px 10px;
}

.classify-list a::before {
    display: block;
    bottom: -2px;
    height: 3px;
    width: 100%;
    content: '';
    background: transparent;
    position: absolute;
    left: 0;
    transition: all 0.5s
}

.classify-list a.active::before,
.classify-list a:hover::before {
    background: royalblue
}

.list-case-box {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: space-between;
}

.list-case-box a {
    font-size: 0;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: calc((100% - 150px) / 4);
    transition: all 0.5s;
    margin-bottom: 50px;

}

.list-case-box a .img {
    position: relative;
    font-size: 0;
    align-items: center;
    justify-content: center;
    display: flex;

}

.list-case-box a img {
    width: 100%;
    height: auto
}

.list-case-box a .text {
    background: #fff;
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    position: relative;
}

.list-case-box a h3 {
    color: black;
    font-size: 20px;
    font-weight: bold;
}

.list-case-box a .tag {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.list-case-box a .tag span {
    margin-right: 10px;
    font-size: 12px;
    color: #a1a1a1;
}

.list-case-box a .tag span::before {
    content: '#'
}

.list-case-box a strong {
    font-size: 14px;
    padding: 10px 0;
    font-family: Constantia;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ececec
    /* opacity: 0 */
}

.list-case-box a * {
    transition: all 0.5s
}


.list-case-box a:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, .2)
}


.list-case-box a:hover strong {
    background: royalblue;
    color: white
}

.list-case-box a .basic {
    position: absolute;
    width: 110%;
    height: 110%;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 30px;
    transform: scale(0);
    opacity: 0;
    z-index: 22;

}

.list-case-box a .basic p {
    font-size: 14px;
    color: white;
    z-index: 2
}

.list-case-box a:hover .basic {
    transform: scale(1);
    opacity: 1
}

.list-case-box a:hover img {
    opacity: 0
}

.list-case-box a:hover .basic::before {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(30, 95, 116, .7) 0%, rgba(23, 9, 49, .7) 100%);
    content: ''
}

.page-box {
    display: flex;
    flex-flow: row nowrap;
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    border-radius: 61px;
    align-self: flex-end;
    align-items: center;
}

.page-box * {
    margin: 0 5px;
    font-family: Constantia;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.5s
}

.page-box span {
    color: #fff;
    background: royalblue;
    font-size: 20px;
    font-weight: bold;
}

.page-box a:hover {
    color: #fff;
    background: royalblue;
}




.list-news-box {
    justify-content: space-between;
}

.list-news-box a {
    width: calc(50% - 25px);
    border: none !important;
    background: #fff;
    margin-bottom: 50px;
}


.list-banner span.time {
    font-family: Constantia;
    color: white;
    font-size: 20px;
    letter-spacing: 2px;
    position: absolute;
    right: 200px;
    bottom: 120px;
}

.cont-box {
    background: #fff;
    padding: 50px;
    width: calc(100% - 400px);
    margin: -100px auto 50px;
    position: relative;
    z-index: 11
}

.cont-page {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-top: 1px solid #f8f8f8;
    padding-top: 50px;
    margin-top: 50px;
    align-items: center;
}

.cont-page * {
    font-size: 16px;
    transition: all 0.5s;
    padding: 10px;
    color: black
}

.cont-page a:hover {
    background: royalblue;
    /* padding: 10px; */
    color: #fff;
    border-radius: 50px;
}

.cont-page span {
    font-size: 14px;
    color: #c1c1c1;
    font-weight: bold
}

.contact-box {
    display: flex;
    margin: 50px auto;
    width: calc(100% - 200px);
    background: #fff;
    flex-flow: column nowrap;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1)
}

.cus-text-box {
    display: flex;
    flex-flow: row nowrap;
    box-sizing: border-box;
    align-items: center;
}

.cus-text-box>* {
    width: 50%
}

.cus-text-main {
    display: flex;
    flex-flow: column nowrap;
    box-sizing: border-box;
    padding: 50px;
}

.cus-text-main h3 {
    font-size: 28px
}

.cus-text-main span {
    font-size: 14px;
}

.cus-text-main b {
    font-family: Constantia;
    color: #e55a54;
    display: block;
    background: url(../images/tel-icon.gif) no-repeat left center;
    font-size: 40px;
    padding-left: 50px;
    margin: 30px 0
}

.cus-text-main p {
    font-size: 13px;
}

.cus-list {
    display: flex;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}

.cus-list .item {
    width: calc(100% / 3);
    border-right: 1px solid #dedede;

}

.cus-list .item div {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
}

.cus-list .item:last-child {
    border: none
}

.cus-list .item span {
    margin: 20px 0
}

.cus-list .item p {
    font-weight: bold;
    font-family: Constantia;
    font-size: 20px;
}

.cus-list .item:first-child p {
    font-size: 16px;
    font-weight: normal
}

.cus-form {
    display: flex;
    flex-flow: row nowrap;
}

.cus-form>* {
    box-sizing: border-box;
    padding: 50px;
}

.cus-mge {
    width: calc(((100% / 3) * 2) + 1px);
    border-right: 1px solid #dedede;
    display: flex;
    flex-flow: column nowrap;
}

.cus-order {
    display: flex;
    flex-flow: column nowrap;
    width: calc(100% / 3 - 1px)
}

.mge-title {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.mge-title .text {
    display: flex;
    flex-flow: column nowrap;
}

.mge-title img {
    margin-right: 20px;
}

.mge-title .text b {
    font-size: 20px
}

.mge-title .text span {
    color: #e55a54
}

.cus-mge form {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between
}

.cus-mge form input {
    width: calc(50% - 20px);
    border: none;
    border-bottom: 1px solid #898a8c;
    padding: 15px 0;
    margin-top: 40px
}

.cus-mge form textarea {
    margin-top: 40px;
    width: 100%;
    border: none;
    border-bottom: 1px solid #898a8c;
}

.cus-mge form button {
    background: #000;
    color: #fff;
    font-size: 16px;
    border: none;
    padding: 20px 50px;
    margin-top: 30px;
}


.order-title {
    display: flex;
    align-items: center;
    /* margin-bottom: 20px */
}

.order-title img {
    margin-right: 20px;
}

.order-title .text {
    display: flex;
    flex-flow: column nowrap;
    padding-left: 20px;
    border-left: 1px solid #dedede
}

.cus-order h3 {
    font-size: 18px;
    margin: 20px 0
}

.cus-order form {
    display: flex;
    flex-flow: column nowrap
}

.cus-order form input {
    border: none;
    border-bottom: 1px solid #898a8c;
    padding: 30px 0
}

.cus-order form button {
    background: #e55a54;
    border: none;
    color: #fff;
    height: 60px;
    font-size: 20px;
    margin-top: 30px;
}


#navSwitch {
    display: none
}

.det-box {
    background: #fff;
    width: calc(100% - 400px);
    margin: -100px auto 50px;
    position: relative;
    z-index: 11;
    display: flex;
    flex-flow: column nowrap;
    font-size: 0;
    /* align-items: flex-start */
}





.det-box-header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 50px 50px;
    padding: 50px 0;
    border-bottom: 1px solid #dedede;
}

.det-box-header div {
    font-size: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.det-box-main {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start
}


.det-box-main>img {
    width: 100%;
    height: auto
}

.det-info {
    display: flex;
    flex-flow: column nowrap;
    box-sizing: border-box;
    padding: 0 50px;
    width: 100%;
}

.det-text {
    font-size: 14px;
    line-height: 2
}

.det-info>a {
    color: #dedede;
    font-size: 12px;
    text-decoration: underline;
    margin: 30px 0
}



#bannerPageText {
    text-transform: uppercase;
    -webkit-tranform: translateZ(0);
    -webkit-transition-duration: 0.05s;
    -moz-tranform: translateZ(0);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    color: #ffffff;
    z-index:1;
    position: absolute;
    top: 30vh;
}
#bannerPageText *{ color: white}
.bp-1 {
    font-size: 50px;
}

.bp-2 {
    font-size: 30px;
    font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
    transition: all 0.5s;
    opacity: 0
}

.about-banner {
    height: 100vh;
    width: 100%;
    background: no-repeat center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.about-banner::before {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(30, 95, 116, .7) 0%, rgba(23, 9, 49, .7) 100%);
    content: ''
}

.ab-box {
    display: flex;
    flex-flow: row wrap;
    z-index: 1;
    width: 1200px;
}

.ab-box .item {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    width: calc(100% / 3);
    border-right: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    box-sizing: border-box;
    padding: 50px 0;
    font-size: 0
}

.ab-box .item:nth-child(3),
.ab-box .item:nth-child(6) {
    border-right: none
}

.ab-box .item:nth-child(4),
.ab-box .item:nth-child(5),
.ab-box .item:nth-child(6) {
    border-bottom: none
}

.ab-box .item span {
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    margin-top: 20px;
}

.about-box {
    box-sizing: border-box;
    padding: 0 150px;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-top: -100px;
    z-index: 99;
    position: relative;
}

.about-box>* {
    margin-bottom: 20px;
}

.about-box-head {
    background: #fff;
    padding: 100px 0;
    width: 100%
}

.about-box-head {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.about-box-head h3 {
    font-size: 50px;
    color: #000;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-bottom: 50px
}

.about-box-head h3::after {
    width: 50px;
    height: 3px;
    background: #000;
    display: block;
    content: '';
    margin-top: 10px
}

.about-box-head p {
    width: 750px;
    font-size: 16px;
}

.about-s-item {
    width: calc(50% - 10px);
    position: relative;
    font-size: 0;
    overflow: hidden;
    cursor: pointer;
    background: black
}

.about-s-item img {
    width: 100%;
    transition: all 0.5s
}

.about-s-item::before {
    background: linear-gradient(rgba(0, 0, 0, .1), 80%, black);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    z-index: 1;
    transition: all 0.5s
}

.about-s-item .text {
    box-sizing: border-box;
    padding: 30px;
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    left: 0;
    transition: all 0.5s;
    z-index: 2;
    align-items: flex-start;
    opacity: 0;
    bottom: -10%
}

.about-s-item .text * {
    color: white;
}

.about-s-item .text h3 {
    font-size: 20px;
    display: flex;
    flex-flow: column nowrap;
}

.about-s-item .text h3::after {
    width: 50%;
    height: 3px;
    background: white;
    display: block;
    content: '';
    margin-top: 10px;
}

.about-s-item .text p {
    width: 100%;
    font-size: 14px;
    margin-top: 10px;
}

.about-s-item:hover img {
    transform: scale(1.1);
    opacity: 0.3
}

.about-s-item:hover::before {
    opacity: 0
}

.about-s-item:hover .text {
    bottom: 0;
    opacity: 1
}

.about-b-item {
    display: flex;
    flex-flow: row nowrap;
    background: black;
    width: 100%
}

.about-b-item>* {
    width: 50%
}

.about-b-item img {
    align-self: flex-start
}

.about-b-item .text {
    padding: 70px;
    align-items: flex-start;
    background: white;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
}

.about-b-item .text p {
    width: 60%
}

.about-b-item .text h3 {
    font-size: 40px;
    align-items: flex-start
}

.about-b-item img {
    transition: all 0.5s;
    cursor: pointer;
}

.about-b-item img:hover {
    opacity: 0.5
}

.text.c {
    justify-content: space-between;
}

.text.c a {
    width: 40px;
    height: 40px;
    color: black;
    border-radius: 100%;
    box-sizing: border-box;
    border: 2px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.5s
}

.text.c a:hover {
    background: black;
    color: #fff
}

.about-box>a {
    width: 100%;
    font-size: 0;
    position: relative;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-box>a img {
    width: 100%;
    transition: all 0.5s
}

.about-box>a:hover img {
    opacity: 0.6
}

.about-box>a::before {
    display: block;
    opacity: 0;
    content: '→';
    width: 40px;
    height: 40px;
    color: #fff;
    border-radius: 100%;
    box-sizing: border-box;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.5s;
    position: absolute;
    margin-top: -50px
}

.about-box>a:hover::before {
    opacity: 1;
    margin-top: 0
}

.section {
    background: no-repeat center;
    background-size: cover;
}


.service-text-item {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
    box-sizing: border-box;
    overflow: hidden
}

.service-text-item.left {
    align-items: flex-start
}

.service-text-item.right {
    align-items: flex-end
}

.service-text-item.left * {
    color: white
}

.service-text-item.right * {
    color: black
}

.service-text-item h3 {
    font-size: 50px;
    font-weight: bold;
    line-height: 1
}

.service-text-item h3::after {
    display: block;
    content: '';
    width: 1em;
    height: 4px;
    background: white;
    margin: 30px 0
}

.service-text-item p {
    width: 100%;
    max-width: 500px;
    font-size: 18px;
}

.service-text-item a {
    margin-top: 50px;
    width: 260px;
    height: 50px;
    border: 2px solid #fff;
    box-sizing: border-box;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-text-item.right h3 {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end
}

.service-text-item.right h3::after {
    background: black
}

.service-text-item.right a {
    border-color: black
}

#serviceBox {
    overflow-x: hidden
}

#serviceBox .footer-box {
    display: none
}

.mobile-btn{ display: none}